<template>
  <div>
    <h1>this is a test</h1>
    <div class="panel">
      <div id="test_plot" style="height: 400px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      x: null,
    };
  },
  methods: {
    plot_part1_data() {
      fetch("http://127.0.0.1:8000/testapi")
        .then((Response) => {
          return Response.json();
        })
        .then((data) => {
          let part_name = data.map(function (x) {
            return x["partname"];
          });
          let part_gmv = data.map(function (x) {
            return x["gmv"];
          });
          let part_nmv = data.map(function (x) {
            return x["nmv"];
          });

          let testecharts = echarts.init(document.getElementById("test_plot"));
          testecharts.setOption({
            title: {
              text: "测试数据展示的图标",
            },
            tooltip: {},
            legend: {
              data: ["gmv", "nmv"],
            },
            xAxis: {
              data: part_name,
            },
            yAxis: {},
            series: [
              { name: "gmv", type: "bar", data: part_gmv },
              { name: "nmv", type: "bar", data: part_nmv },
            ],
          });

          //   console.log(data);
        });
    },
  },
  mounted() {
    this.plot_part1_data();
  },
};
</script>


<style >
.panel {
  padding: 20px;
  border-color: green;
  border-width: medium;
  border-style: solid;
  border-radius: 20px;
}
</style>